﻿
function UpdateThemeComponentRules(baseRuleName) {

    var themeSettings = document.getElementById("theme-" + baseRuleName);

    var computedStyle = document.defaultView.getComputedStyle(themeSettings, "");


    // REMOVE EXISTING INLINE STYLE SHEET

    $("#theme-style-components-" + baseRuleName).remove();


    // CREATE BACKGROUND 

    var backgroundStyle = "." + baseRuleName + "-background ";

    backgroundStyle += "{ background-clip: " + computedStyle.backgroundClip;

    backgroundStyle += "; background-attachment: " + computedStyle.backgroundAttachment;

    backgroundStyle += "; background-color: " + computedStyle.backgroundColor;

    backgroundStyle += "; background-image: " + computedStyle.backgroundImage;

    backgroundStyle += " ;background-origin: " + computedStyle.backgroundOrigin;

    backgroundStyle += "; background-position: " + computedStyle.backgroundPosition;

    backgroundStyle += "; background-repeat: " + computedStyle.backgroundRepeat;

    backgroundStyle += "; background-size: " + computedStyle.backgroundSize;

    backgroundStyle += " } \r\n";


    // CREATE BORDER 

    var borderStyle = "." + baseRuleName + "-border ";

    borderStyle += "{ border-top-color: " + computedStyle.borderTopColor;

    borderStyle += "; border-top-style: " + computedStyle.borderTopStyle;

    borderStyle += "; border-top-width: " + computedStyle.borderTopWidth;

    borderStyle += "; border-right-color: " + computedStyle.borderRightColor;

    borderStyle += "; border-right-style: " + computedStyle.borderRightStyle;

    borderStyle += "; border-right-width: " + computedStyle.borderRightWidth;

    borderStyle += "; border-bottom-color: " + computedStyle.borderBottomColor;

    borderStyle += "; border-bottom-style: " + computedStyle.borderBottomStyle;

    borderStyle += "; border-bottom-width: " + computedStyle.borderBottomWidth;

    borderStyle += "; border-left-color: " + computedStyle.borderLeftColor;

    borderStyle += "; border-left-style: " + computedStyle.borderLeftStyle;

    borderStyle += "; border-left-width: " + computedStyle.borderLeftWidth;

    borderStyle += " } \r\n";


    var borderColorStyle = "." + baseRuleName + "-border-color ";

    borderColorStyle += "{ border-top-color: " + computedStyle.borderTopColor;

    borderColorStyle += "; border-right-color: " + computedStyle.borderRightColor;

    borderColorStyle += "; border-bottom-color: " + computedStyle.borderBottomColor;

    borderColorStyle += "; border-left-color: " + computedStyle.borderLeftColor;

    borderColorStyle += " } \r\n";

    // COLOR STYLE 

    var colorStyle = "." + baseRuleName + "-color ";

    colorStyle += "{ color: " + computedStyle.color

    colorStyle += " } \r\n";


    // CREATE NEW INLINE STYLE SHEET

    var stylesheet = "<style id=\"theme-style-components-" + baseRuleName + "\" type=\"text/css\">";

    stylesheet += backgroundStyle;

    stylesheet += borderStyle;

    stylesheet += colorStyle;

    stylesheet += "</style>";

    $(stylesheet).appendTo("head");

}

function UpdateTheme(themeName) {

    if ((themeName != undefined) && (themeName.length > 0)) {

        // CHANGE THEME IF REQUESTED, OTHERWISE USE PRESET THEME

        $("#ThemeStylesheet")[0].href = $("#RootUrl").val() + "Assets/Css/Themes/" + themeName + "/jquery-ui-1.10.2.min.css";

    }

    setTimeout(function () {

        // CREATE THEME STYLE COMPONENTS BASED ON EXPRESSED VERSIONS

        $("#theme-rules-expressed div").each(function () {

            UpdateThemeComponentRules(this.className);

        });

    }, 200);

}

$(document).ready(function () {

    UpdateTheme();

});
